<!-- 首页 -->
<template>
    <view class="home-wrap u-m-b-20">
        <shopro-navbar :isBack="true">
            <text
                slot="content"
                style="color: #000; width: 100%; text-align: center;padding-left: 20rpx;font-size:30rpx"
            >
                {{ '个人报表' }}
            </text>
        </shopro-navbar>
        <view class="content-box u-p-20 u-m-l-20 u-m-r-20">
            <view class="u-flex u-row-between u-p-20 u-border-20 top-search u-m-b-20" @click="showriqiPopu()" style="font-size: 32rpx;border-radius:24rpx">
                <view><u-icon name="clock" size="34" color="#B5B5B5"></u-icon></view>
                <view :style="{color: startTime?'#000':'#B5B5B5',width:'40%','text-align':'center'}">{{startTime?startTime:'开始时间'}}</view>
                <view class="u-m-l-20 u-m-r-20">至</view>
                <view :style="{color: endTime?'#000':'#B5B5B5',width:'40%','text-align':'center'}">{{endTime?endTime:'结束时间'}}</view>
            </view>
            <!--            报表-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item u-row-left u-col-top">
                <view class="u-flex u-col-center u-row-between u-w-40s u-h-100" style="width: 30%!important;">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi"></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">成绩概况</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view v-show="!showriqi" class="u-flex u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;height: 250rpx;">
                    <view class="lenged u-flex u-flex-col">
                        <view class="wancheng u-flex u-row-center u-col-top">
                            <view class="miaoshu">
                                <view class="u-m-b-8 u-flex u-row-center" style="font-size: 28rpx;font-weight: bold">
                                    {{homeData.score}}
                                </view>
                                <view class="u-flex u-row-between timu">成绩平均分</view>
                            </view>
                        </view>
                        <view class="wancheng u-flex u-row-between u-col-top">
                            <view class="miaoshu">
                                <view class=" u-m-b-8 u-flex u-row-center" style="font-size: 28rpx;font-weight: bold">
                                    {{homeData.class_rank}}
                                </view>
                                <view class="u-flex timu u-row-between">班级排名</view>
                            </view>
                            <view class="miaoshu">
                                <view class=" u-m-b-8 u-flex u-row-center" style="font-size: 28rpx;font-weight: bold">
                                    {{homeData.grade_rank}}
                                </view>
                                <view class="u-flex timu u-row-between">院系排名</view>
                            </view>
                        </view>
                    </view>
<!--                    <view class="chart-content" style="width: 60%;height: 250rpx;position: absolute;right: -44rpx;top: -17%">-->
<!--                        <qiun-data-charts-->
<!--                            v-if="homeData.hege_rate"-->
<!--                            type="arcbar"-->
<!--                            :opts="opts_jindu"-->
<!--                            :chartData="jinduChartAllData"-->
<!--                        />-->
<!--                    </view>-->
                    <view class="chart-content" style="width: 100%;height: 200rpx;position: relative">
                        <uni-ec-canvas class="uni-ec-canvas-nannv" id="uni-ec-canvas-nannv" ref="canvas_nannv" canvas-id="uni-ec-canvas-nannv" :ec="ec">
                        </uni-ec-canvas>
                        <view style="position: absolute;right: 11%;bottom: -12%">成绩合格率</view>
                    </view>
                </view>
            </view>
            <!--            全校体测结果-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 yuangong-item u-col-top">
                <view class="u-flex u-col-center u-row-left u-w-40s u-h-100" style="width: 30%!important;">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi"></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">个人排名</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view class="tablist u-flex u-row-between u-col-center u-m-t-20 u-m-b-20">
                    <view class="tab-item u-flex-1 u-flex u-row-center u-p-20 u-col-center" :class="isChoosed?'actived':''" @click="changeStatus()">
                        运动总时长
                    </view>
                    <view class="tab-item u-flex-1 u-flex u-row-center u-p-20 u-col-center" :class="isChoosed?'':'actived'" @click="changeStatus()">
                        跑步总里程
                    </view>
                </view>
                <view style="color: #8E8E8E" class="u-p-10">运动时长排名（年级前十名）</view>
                <view class="u-m-t-20 u-w-100s">
                    <view class="collect-list u-flex u-w-100s u-row-between collect-list-top u-p-t-20 u-p-b-20">
                        <view class="xuhao u-flex u-row-center">排名</view>
                        <view class="xuehao u-flex u-row-center">专业班级</view>
                        <view class="isbangding u-flex u-row-center">学生姓名</view>
                        <view class="shouhuan u-flex u-row-center">运动时长(h)</view>
                    </view>
                    <view class="collect-list u-flex u-w-100s u-row-between u-p-t-20 u-p-b-20" v-for="(goods, index) in isChoosed?homeData.class_rank1:homeData.class_rank2" :key="index">
                        <view class="xuhao u-flex u-row-center">{{goods.rank}}</view>
                        <view class="xuehao u-flex u-row-center">{{goods.depart}}</view>
                        <view class="isbangding u-flex u-row-center">{{goods.name}}</view>
                        <view class="shouhuan u-flex u-row-center">{{goods.num}}</view>
                    </view>
                    <view class="u-w-100s u-p-20 u-flex u-row-center" style="color: #fff;background: #3FA897">
                        <view>当前排名</view>
                        <view>班级  <text class="u-m-l-8">{{ homeData.grade_rank }}</text></view>
                        <view>年级  <text class="u-m-l-8">{{homeData.grade_rank}}</text></view>
                    </view>
                </view>

            </view>

            <!--            报表-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item u-row-left u-col-top">
                <view class="u-flex u-col-center u-row-between u-w-40s u-h-100" style="width: 30%!important;">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi"></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">身体状况</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view v-show="!showriqi" class="u-flex u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;">
                    <view class="chart-content" style="width: 100%;height: 660rpx">
                        <qiun-data-charts
                            type="column"
                            :opts="shengaobarTop"
                            :chartData="high_bmiChartAllData"
                        />

                    </view>
                </view>
            </view>

            <!--            报表-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item u-row-left u-col-top">
                <view class="u-flex u-col-center u-row-between u-w-40s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi"></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">各项目平均分</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view v-show="!showriqi" class="u-flex u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;">
                    <view class="chart-content" style="width: 100%;height: 560rpx">
                        <view class="chart-content" style="width: 100%;height: 560rpx">
                            <qiun-data-charts
                                type="mix"
                                :opts="yuanxiPJChartOption"
                                :chartData="yuanxiPJChartData"
                                :ontouch="true"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <u-calendar v-model="showriqi" :mode="mode" :active-bg-color="'#3FA897'" max-date="2050-01-01" @change="changeDate" :range-bg-color="'#caeee6'" :range-color="'#3FA897'" :customStyle="{background:'#3FA897'}"></u-calendar>
        </view>
    </view>
</template>

<script>

import {mapGetters} from 'vuex';
let chart = null
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from 'echarts'
export default {
    components: {
        uniEcCanvas
    },
    data() {
        return {
            isChoosed  : true,
            ec         : {
                lazyLoad: true
            },
            showriqi   : false,
            mode       : 'range',
            homeData   : {},
            myGroupList: [],
            labelOption    : {
                show     : true,
                position : 'inside',
                formatter: '{c}%',
                color    : '#fff'
            },
            //     常规饼图
            high_bmiDataX: [],
            high_bmiData : [],
            yuanxi_avgsData: [],
            yuanxi_avgsDataX : [],
            rateShu:0,
            startTime:'',
            endTime          : '',
            yuanxiPJChartData: {},
            jinduChartAllData: {},
            high_bmiChartAllData:{}
        };
    },
    computed: {
        ...mapGetters(['isLogin', 'userInfo']),
        //各院系平均分
        yuanxiPJChartOption(){
            return {
                color       : ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
                padding     : [15, 15, 0, 15],
                enableScroll: true,
                legend      : {
                    data: ['个人平均分', '班级平均分', '班级最高分'],
                    fontSize:10
                },
                xAxis       : {
                    disableGrid: true,
                    scrollShow : true,
                    itemCount  : 5,
                    marginTop  : 6,
                    fontSize   : 12
                },
                yAxis       : {
                    disabled   : false,
                    disableGrid: false,
                    splitNumber: 5,
                    gridType   : "dash",
                    dashLength : 4,
                    gridColor  : "#CCCCCC",
                    padding    : 10,
                    showTitle  : true,
                    fontSize   : 12,
                    data       : [
                        {
                            position: "left",
                            title   : "分数 单位:分",
                            format  : '分',
                        },
                    ]
                },
                extra       : {
                    mix: {
                        column: {
                            width: 20
                        }
                    }
                }
            }
        },
        shengaobarTop() {
            return {
                color: ["#FFD318"],
                padding: [15,15,0,5],
                enableScroll: true,
                legend: {
                    data: [
                        '身高体重'
                    ],
                    fontSize:10
                },
                xAxis: {
                    disableGrid: true,
                    scrollShow : true,
                    itemCount  : 5,
                    marginTop  : 6,
                    fontSize   : 12
                },
                yAxis: {
                    fontSize   : 12,
                    data: [
                        {
                            disabled   : false,
                            disableGrid: false,
                            splitNumber: 5,
                            gridType   : "dash",
                            dashLength : 4,
                            gridColor  : "#CCCCCC",
                            padding    : 10,
                            showTitle  : true,
                            min: 0
                        }
                    ]
                },
                extra: {
                    column: {
                        type: "group",
                        width: 30,
                        activeBgColor: "#000000",
                        activeBgOpacity: 0.08
                    }
                }
            }
        },
        nannvPieoptions() {
            var that = this;
            return {
                series: [
                    {
                        name: '',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, '50%'],
                        center: ['80%', '45%'],
                        label: {
                            position: 'center',
                            fontSize: 14,
                            color: '#333',
                            formatter: that.homeData.hege_rate
                        },
                        labelLine: {
                            show: false
                        },
                        data: [{ value: 100, name: "" }],
                        // 鼠标移上去的item不会凸出了
                        hoverAnimation: false,
                        itemStyle: {
                            opacity: 0.7,
                            margin:10,
                            color:'#fff'
                        },
                    },
                    {
                        name     : 'Access From',
                        type     : 'pie',
                        radius   : ['70%', '90%'],
                        center   : ['80%', '45%'],
                        labelLine: {
                            show: false
                        },
                        emphasis : {
                            label: {
                                show: false
                            }
                        },
                        itemStyle: {
                            borderRadius: 20
                        },
                        data     : [
                            {
                                value    : that.rateShu,
                                name: '',
                                itemStyle: {
                                    color       : {
                                        x         : 0,
                                        y         : 0,
                                        x2        : 0,
                                        y2        : 1,
                                        global    : false,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color : '#3FA897'
                                            },
                                            {
                                                offset: 1,
                                                color : '#3FA897'
                                            }
                                        ]
                                    },
                                    borderRadius: 15
                                },
                            },
                            {
                                value    : 100-that.rateShu,
                                name: '',
                                itemStyle: {
                                    color       : {
                                        x         : 0,
                                        y         : 0,
                                        x2        : 0,
                                        y2        : 1,
                                        global    : false,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color : '#E2EBEA'
                                            },
                                            {
                                                offset: 1,
                                                color : '#E2EBEA'
                                            }
                                        ]
                                    },
                                    borderRadius: 15
                                }
                            },

                        ],
                        // 鼠标移上去的item不会凸出了
                        hoverAnimation: false,
                    }
                ]
            }
        }
        // opts_jindu() {
        //     var that = this;
        //     return {
        //         color   : "#3FA897",
        //         padding : undefined,
        //         title   : {
        //             name    : that.homeData.hege_rate,
        //             fontSize: 18,
        //             color   : "#3FA897"
        //         },
        //         subtitle: {
        //             name     : "成绩合格率",
        //             fontSize : 12,
        //             color    : "#666666",
        //             offsetY: 30
        //         },
        //         extra   : {
        //             arcbar: {
        //                 type           : "default",
        //                 width          : 12,
        //                 backgroundColor: "#E9E9E9",
        //                 startAngle     : 0.75,
        //                 endAngle       : 0.25,
        //                 gap            : 2,
        //                 linearType     : "custom"
        //             }
        //         }
        //     }
        // }
    },
    onPullDownRefresh() {

    },

    onShow() {

    },
    onHide() {

    },
    onLoad(options) {
        this.init()
        setTimeout(()=> {
            if (this.$Route.query.id) {
                uni.setStorageSync('fid', this.$Route.query.id);
            }
        })
    },
    methods: {
        initNannvChart(canvas, width, height, canvasDpr) {
            console.log(canvas, width, height, canvasDpr)
            chart = echarts.init(canvas, null, {
                width           : width,
                height          : height,
                devicePixelRatio: canvasDpr
            })
            canvas.setChart(chart)
            chart.setOption(this.nannvPieoptions)
            return chart
        },
        // 初始化
        init() {
            this.initdata()
        },
        showriqiPopu(){
            this.showriqi = true;
        },
        changeDate(e) {
            this.startTime = e.startDate
            this.endTime = e.endDate
        },
        changeStatus() {
            this.isChoosed = !this.isChoosed;
        },
        denglu() {
            this.$store.dispatch("showAuthModal", "1233");
        },
        initdata() {
            let that = this;
            that
                .$http(
                    "login.userDataBaobiao",
                    {begin:that.startTime,end:that.endTime},
                    "加载中..."
                )
                .then(res => {
                    that.homeData      = res.data

                    that.pinjunChartData();
                    that.rateShu = Number(that.homeData.hege_rate.split('%')[0]);
                    that.$refs.canvas_nannv.init(this.initNannvChart);
                    // that.jinduChartData();
                    that.highBmiData()
                    console.log("===that.homeData.hege_rate",that.rateShu)
                });
        },
        highBmiData() {
            var that           = this;
            that.high_bmiDataX = that.homeData.high_bmi.data;
            that.high_bmiData  =[{
                name:"身高体重",
                data:that.homeData.high_bmi.datas,
                format : "tizhongbiaoshi"
            }]
            let res = {
                categories: that.high_bmiDataX,
                series: that.high_bmiData
            };
            this.high_bmiChartAllData = JSON.parse(JSON.stringify(res));
        },
        jinduChartData() {
            var that               = this;
            that.rateShu           = Number(that.homeData.hege_rate.split('%')[0])/100;
            let res                = {
                series: [
                    {
                        name : "成绩合格率",
                        color: "#3FA897",
                        data : that.rateShu
                    }
                ]
            };
            console.log("===that.rateShu",that.rateShu)
            that.jinduChartAllData = JSON.parse(JSON.stringify(res));
        },
        pinjunChartData() {
            let that               = this;
            that.yuanxi_avgsData   = [
                {
                    name    : "个人平均分",
                    type    : 'line',
                    tooltip : {
                        valueFormatter: function (value) {
                            return value + ' 分';
                        }
                    },
                    barWidth: 20,
                    data    : that.cutTop(that.homeData.project_avgs[1])
                },
                {
                    name    : "班级平均分",
                    barWidth: 20,
                    tooltip : {
                        valueFormatter: function (value) {
                            return value + '分';
                        }
                    },
                    type    : "line",
                    data    : that.cutTop(that.homeData.project_avgs[2])
                },
                {
                    name    : "班级最高分",
                    barWidth: 20,
                    tooltip : {
                        valueFormatter: function (value) {
                            return value + '分';
                        }
                    },
                    type    : "line",
                    data    : that.cutTop(that.homeData.project_avgs[3])
                }
            ];
            that.yuanxi_avgsDataX  = that.cutTop(that.homeData.project_avgs[0]);
            let res                = {
                categories: that.yuanxi_avgsDataX,
                series    : that.yuanxi_avgsData
            };
            that.yuanxiPJChartData = JSON.parse(JSON.stringify(res));
        },
        cutTop(arr) {
            let newArr = arr.slice(0)
            newArr.shift()
            return newArr
        },
        // 路由跳转
        jump(path, parmas) {
            this.$Router.push({
                path : path,
                query: parmas
            });
        },
    }
};
</script>

<style lang="scss" scoped>
.uni-ec-canvas {
    width: 100%;
    height: 400rpx;
    display: block;
}

.uni-ec-canvas-bing {
    width: 100%;
    height: 200rpx;
    display: block;
}

.uni-ec-canvas-hegelv {
    width: 100%;
    height: 400rpx;
    display: block;
}

.home-wrap {
    background: #F5F5F5 !important;
}

.yuangong-item {
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(53, 110, 253, 0.05);
    border-radius: 20rpx;

    .topnum {
        font-size: 30rpx;
        margin-bottom: 10rpx;
    }

    .topname {
        font-size: 24rpx;
        color: #999999;
    }
}

.baobiao-item {
    background: #ffffff;
    border-radius: 30rpx;
    padding: 20rpx;

    .time-day {
        width: 100rpx;
        background: #2A6CFF;
        color: #fff;
        padding: 6rpx 8rpx;
    }

    .time-month {
        width: 100rpx;
        background: #fff;
        box-shadow: 0px 2px 4px 0px rgba(53, 110, 253, 0.05);
        border-radius: 10rpx;
        color: #1989fa;
        padding: 6rpx 8rpx;
    }
}

.lenged {
    position: absolute;
    top: 16rpx;
    left: -22rpx;
    width: 47vw;
    padding: 10rpx 18rpx;

    .wancheng {
        width: 100%;

        .timu {
            color: #999;
        }
    }
}

::v-deep .u-drawer {
    z-index: 1110000 !important;
}

.u-h-100 {
    background: #3FA897;
    color: #fff;
    position: relative;
    margin-left: -42rpx;
    .biaoshi {
        position: absolute;
        left: 0;
        bottom: -24rpx;
        width: 0px;
        height: 0px;
        border-top: 14rpx solid #067664;
        border-right: 14rpx solid #067664;
        border-bottom: 14rpx solid transparent;
        border-left: 14rpx solid transparent;
    }

    .right-arrow {
        position: absolute;
        right: 0;
        bottom: 0rpx;
        width: 0px;
        height: 0px;
        border-top: 40rpx solid #3FA897;
        border-right: 40rpx solid #fff;
        border-bottom: 40rpx solid #3FA897;
        border-left: 40rpx solid #3FA897;
    }
}

.collect-list {
    background: #fff;
    border-bottom: 1rpx solid #F5F5F5;

    .xuhao {
        width: 10%;
    }

    .xuehao {
        width: 35%;
    }

    .isbangding {
        width: 20%;
    }

    .shouhuan {
        width: 35%;
    }
}

.collect-list-top {
    background: #F5F5F5;
    color: #8E8E8E;
}

.tablist {
    width: 100%;
    border-radius: 38rpx;
    background: #fff;
    font-size: 32rpx;
    border: 1rpx solid #ccc;
    .tab-item {
        &.actived {
            background: #3FA897;
            color: #fff;
            border-radius: 38rpx;
        }

    }
}
.top-search{
    background: #fff;
}

</style>
